<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item prop="defaultDeptId">
        <el-checkbox v-model="defaultDeptId">默认选中</el-checkbox>
      </el-form-item> -->
      <el-form-item prop="deptId">
        <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="部门"
          style="width: 450px" size="small" />
      </el-form-item>

      <el-form-item prop="pno">
        <el-input v-model="queryParams.pno" placeholder="财物编号" clearable size="small" style="width: 250px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item  prop="name">
        <el-input v-model="queryParams.name" placeholder="财物名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="daterangeCreateTime" size="small" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<!--        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['oms:staging:add']">新增</el-button>-->
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['oms:staging:edit']">修改</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['oms:staging:remove']">删除</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['oms:staging:export']">导出</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="16">
        <div style="margin-bottom: 15px;display: flex;">
          <el-radio-group v-model="queryParams.searchStatus" @change="radioChange">
            <el-radio-button v-for="tab in tabs" :label="tab.label" >
              <el-badge :value="tab.badge" class="item">
                {{tab.name}}
              </el-badge>
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="stagingList" @selection-change="handleSelectionChange" border stripe>
      <el-table-column type="selection" width="55" align="center" fixed="left"/>
      <el-table-column label="编号" prop="pno"  min-width="240" fixed="left">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleInfo(scope.row)">{{scope.row.pno}}</el-link>
            </template>
          </el-table-column>
      <el-table-column label="名称" prop="name" min-width="160" fixed="left">
        <!-- <template slot-scope="scope">
           <el-popover v-if="scope.row.oss.length > 0"
              placement="top-start"
              trigger="hover"
              width="100px">
              <el-image
                style="width: 100px; height: 100px"
                :src="ossTransfer(scope.row.oss,'one')" :preview-src-list="ossTransfer(scope.row.oss,'list')"></el-image>
              <el-link type="primary" slot="reference">{{scope.row.name}}</el-link>
            </el-popover>
            <span v-if="scope.row.oss.length == 0">{{scope.row.name}}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="扣押单位" prop="officeName" min-width="260"/>
      <el-table-column label="所属权单位" prop="transferDeptName" width="100">
       <template slot-scope="scope">
          <el-tag v-if="!scope.row.transferDeptName || scope.row.transferDeptName == '' || scope.row.transferDeptName.substr(0,1) == '3'
          || (
          scope.row.transferDeptName.substr(0,1) != '8' && scope.row.transferDeptName!='检察院'
          && scope.row.transferDeptName.substr(0,1) != '1' && scope.row.transferDeptName!='法院'
          )">公安</el-tag>
          <el-tag type="success" v-else-if="scope.row.transferDeptName.substr(0,1) == '8' || scope.row.transferDeptName=='检察院'">检察院</el-tag>
          <el-tag type="warning" v-else-if="scope.row.transferDeptName.substr(0,1) == '1' || scope.row.transferDeptName=='法院'">法院</el-tag>
         </template>
       </el-table-column>
      <el-table-column label="移交类型" prop="type" width="120">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.oms_staging_type" :value="scope.row.type" />
        </template>
      </el-table-column>
       <el-table-column label="登记人"  prop="updateName" min-width="220"/>
      <el-table-column label="登记时间"  prop="registerTime"  min-width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="仓库" prop="storeName" min-width="120"/> -->
      <!-- <el-table-column label="备注" prop="remark"  width="180"/>
      <el-table-column label="附件" prop="pics" width="180">
        <template slot-scope="scope" v-if="scope.row.pics">
          <el-image
            style="width: 120px; height: 60px;margin-right: 5px;" :src="scope.row.pics.split(',')[0]" fit="scale-down"
            :preview-src-list="scope.row.pics.split(',')"></el-image>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="调用时间" prop="transferTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.transferTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="调用原因" prop="transferRemark"  width="180"/>
      <el-table-column label="归还时间" prop="returnTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.returnTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="状态" prop="transferStatus" width="80" align="center" fixed="right">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.oms_staging_status" :value="scope.row.transferStatus" />
        </template>
      </el-table-column> -->
     <el-table-column label="操作" class-name="small-padding fixed-width" align="center" min-width="120" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)"
            v-hasPermi="['oms:staging:edit']">查看</el-button> -->
<!--          <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['oms:staging:edit']" v-if="scope.row.transferStatus == '0'">登记</el-button>-->
          <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleUpdate(scope.row)"
            v-hasPermi="['oms:staging:edit']" v-if="scope.row.transferStatus == '1'">补充</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleUpdate(scope.row)"
              v-hasPermi="['oms:staging:edit']" v-if="scope.row.transferStatus == '2'">编辑</el-button>
          <!-- <el-button size="mini" type="text" class="text-danger" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['oms:staging:remove']">作废</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

      <el-drawer :title="title" :visible.sync="drawer" :before-close="handleClose" size="75vw">
        <div class="mb20 ml20">
          <span style="font-size: 20px;">{{form.pno}}</span>
          <div class="fr mr10">
<!--            <el-button type="primary" size="mini" @click="handleUpdate(form)" v-hasPermi="['oms:staging:edit']" v-if="form.transferStatus == '0'">登记</el-button>-->
            <el-button type="primary" size="mini" @click="handleUpdate(form)" v-hasPermi="['oms:staging:edit']" v-if="form.transferStatus == '1'">补充</el-button>
            <el-button type="primary" size="mini" @click="handleUpdate(form)" v-hasPermi="['oms:staging:edit']" v-if="form.transferStatus == '2'">编辑</el-button>
          </div>
        </div>
        <el-card>
          <el-tabs v-model="activeName">
              <el-tab-pane label="登记信息" name="0">
                  <el-descriptions class="margin-top" border :column="3">
                    <el-descriptions-item label="编号">{{form.pno}}</el-descriptions-item>
                    <el-descriptions-item label="名称">{{form.name}}</el-descriptions-item>
                    <el-descriptions-item label="分类">{{form.classifyName+'/'+form.secondClassifyName+'/'+form.thirdClassifyName}}</el-descriptions-item>

                    <el-descriptions-item label="所属单位">{{form.deptName}}</el-descriptions-item>
                    <el-descriptions-item label="保管单位">{{form.transferDeptName}}</el-descriptions-item>
                    <el-descriptions-item label="移交类型">
                      <dict-tag :options="dict.type.oms_staging_type" :value="form.type" />
                    </el-descriptions-item>
                    <el-descriptions-item label="扣押单位">{{form.officeName}}</el-descriptions-item>
                    <!-- <el-descriptions-item label="办案民警">{{form.registerer}}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="存放仓库">{{form.storeName}}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="移交说明" :span="4">{{form.remark}}</el-descriptions-item> -->
                   <template v-if="form.type == '1'">
                     <el-descriptions-item label="调用时间">
                       <span>{{ parseTime(form.transferTime) }}</span>
                     </el-descriptions-item>
                     <el-descriptions-item label="归还时间">
                       <span>{{ parseTime(form.returnTime) }}</span>
                     </el-descriptions-item>
                     <el-descriptions-item label="调用原因" :span="4">{{form.transferRemark}}</el-descriptions-item>
                   </template>
                    <el-descriptions-item label="数量">{{form.nums}}</el-descriptions-item>
                    <el-descriptions-item label="接收数量">{{form.receiveNums}}</el-descriptions-item>
                    <el-descriptions-item label="保管场所" v-if="form.custodianPlace">{{form.custodianPlace}}</el-descriptions-item>
                    <el-descriptions-item label="库区库位" v-if="form.warehouseLocation">{{form.warehouseLocation}}</el-descriptions-item>
                    <!-- <el-descriptions-item label="数量单位">
                      <template v-for="dict in dict.type.oms_property_unit">
                        <p v-if="dict.value == form.unit">{{dict.label}}</p>
                      </template>
                    </el-descriptions-item> -->
                    <el-descriptions-item label="登记人">{{form.updateName}}</el-descriptions-item>
                    <el-descriptions-item label="登记时间">
                      <span>{{ parseTime(form.updateTime) }}</span>
                    </el-descriptions-item>
                    <!-- <el-descriptions-item label="物品特征" :span="4">{{form.feature}}</el-descriptions-item> -->
                    <el-descriptions-item label="附件">
                       <!-- <el-image
                         style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(form.oss,'one')" fit="scale-down"
                         :preview-src-list="ossTransfer(form.oss,'list')"></el-image> -->
                         <el-image v-if="form.oss && form.oss.length > 0" v-for="(pic,pindex) in form.oss"
                         style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                         :preview-src-list="ossTransfer(form.oss,'list')"></el-image>
                    </el-descriptions-item>
                  </el-descriptions>
              </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-drawer>
  </div>
</template>

<script>
import {
  listStaging,
  getStaging,
  delStaging,
  addStaging,
  updateStaging,
  getStagingPageList,
  getStagingInfoByPno,
  updateTransferIds, encryptProBase
} from "@/api/oms/staging";
  import {
    treeselect
  } from "@/api/system/dept";
  import {
    listStore,
    storeTreeselect,
    getStore
  } from "@/api/wms/store";
  import {
    classifyTreeselect
  } from "@/api/oms/classify";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import selectProperty from "@/components/SelectProperty/index.vue";
  export default {
    name: "Staging",
    dicts: ['oms_staging_type','sys_common_status','oms_staging_status','oms_property_unit'],
    components: {
      Treeselect,
      selectProperty
    },
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        drawer:false,
        activeName:0,
        defaultDeptId:true,
        daterangeCreateTime: [],
        // 选中数组
        ids: [],
        //tabs
        tabs:[
          {label:undefined,name:'全部',badge:undefined,type:undefined,transferStatus:undefined},
          {label:'0',name:'待登记',badge:undefined,type:undefined,transferStatus:'0'},
          {label:'1',name:'已登记',badge:undefined,type:undefined,transferStatus:'2'},
          {label:'4',name:'暂缓移交',badge:undefined,type:'2',transferStatus:'2'},
          {label:'2',name:'临时调用',badge:undefined,type:'1',transferStatus:undefined},
          {label:'3',name:'不可移交',badge:undefined,type:'0',transferStatus:undefined},
          {label:'5',name:'其他',badge:undefined,type:'4',transferStatus:undefined}
        ],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 暂存登记表格数据
        stagingList: [],
        deptOptions:[],
        storeOptions: [],
        classifyOptions:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          transferStatus:undefined,
          status:undefined,
          searchStatus:undefined,
          name:undefined,
          pno:undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          deptId: [{
            required: true,
            message: "民警单位不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "移交类型不能为空",
            trigger: "blur"
          }],
          registerer: [{
            required: true,
            message: "登记人不能为空",
            trigger: "blur"
          }],
          registerTime: [{
            required: true,
            message: "登记时间不能为空",
            trigger: "blur"
          }],
          storeId: [{
            required: true,
            message: "仓库不能为空",
            trigger: "blur"
          }],
          remark: [{
            required: true,
            message: "移交说明不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      // console.info(this.$store.state.user.userInfo.dept.deptName);
      this.getList();
      this.getTreeselect();
      this.getStoreTreeselect();
      this.getClassifyTreeselect();
    },
    activated() {
        const time = this.$route.query.t;
        if (time != null && time != this.uniqueId) {
          this.uniqueId = time;
          this.queryParams.pageNum = Number(this.$route.query.pageNum);
          this.getList();
        }
    },
    methods: {
      /** 查询暂存登记列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
          this.queryParams.params["beginRegisterTime"] = this.daterangeCreateTime[0];
          this.queryParams.params["endRegisterTime"] = this.daterangeCreateTime[1];
        }
        getStagingPageList(this.queryParams).then(response => {
          this.stagingList = response.rows;
          this.total = response.total;
          this.loading = false;

          this.tabs.forEach((item)=>{
          	if(item.label == this.queryParams.searchStatus){
          		item.badge = this.total;
          	}else{
          		item.badge = undefined;
          	}
          })
        });
      },
      radioChange(e){
        this.tabs.forEach(item=>{
            if(item.label == e){
              this.queryParams.type = item.type;
              this.queryParams.transferStatus = item.transferStatus;
            }
        })
        this.getList();
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 查询分类下拉树结构 */
      getClassifyTreeselect() {
        classifyTreeselect().then(response => {
          this.classifyOptions = response.data;
        });
      },
      /** 查询分类下拉树结构 */
      getStoreTreeselect() {
        storeTreeselect().then(response => {
          this.storeOptions = response.data;
        });
      },
      addDtl(){
        let data = {
          id: undefined,
          taskId: undefined,
          pno: undefined,
          name: undefined,
          classifyId: undefined,
          charater: undefined,
          nums: undefined,
          oss: [],
          delFlag: '0'
        }
        this.form.items.push(data)
      },
      selectDtl() {
        this.$refs.elDrawer.open()
      },
      dtlDel(scope) {
        let index = scope.$index;
        if (this.form.items[index].id && this.form.items[index].id != '') {
          this.form.items[index].delFlag = '2';
        } else {
          this.form.items.splice(index, 1)
        }
      },
      //获取选择后的财务数据
      handleSelected(array) {
        array.forEach(item => {
          item.delFlag = '0'
          item.id = undefined
          item.nums = '0'

          this.form.items.push(item)
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deptId: undefined,
          type: undefined,
          registerTime: undefined,
          registerer: undefined,
          storeId: undefined,
          remark: undefined,
          pics: undefined,
          status: "0",
          transferTime: undefined,
          transferRemark: undefined,
          returnTime: undefined,
          createBy: undefined,
          createTime: undefined,
          updateBy: undefined,
          updateTime: undefined,
          delFlag: undefined,
          items: []
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangeCreateTime = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        // this.reset();
        // this.open = true;
        // this.title = "添加暂存登记";
        this.$router.push({
          path: '/oms/stagingInfo/add',
          query: {
            pageNum: this.queryParams.pageNum
          }
        });
      },
      handleInfo(row){
         // const id = row.id;
         // this.$router.push({
         //   path: '/oms/stagingInfo/detail/' + id,
         //   query: {
         //     pageNum: this.queryParams.pageNum
         //   }
         // });

         this.reset();
         if(row.transferStatus == '1' || row.transferStatus == '2'){
           getStaging(row.id).then(response => {
             this.form = response.data;
             this.drawer = true;
             this.title = '移交登记详情'
           });
         }else{
           getStagingInfoByPno({pno:row.pno}).then(response => {
             this.form = response.data;
             this.drawer = true;
             this.title = '移交登记详情'
           });
         }

      },
      handleClose(){
        this.drawer = false;
        this.reset();
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        // this.loading = true;
        // this.reset();
        // const id = row.id || this.ids
        // getStaging(id).then(response => {
        //   this.loading = false;
        //   this.form = response.data;
        //   this.open = true;
        //   this.title = "修改暂存登记";
        // });
        const id = row.id
        this.$router.push({
          path: '/oms/stagingInfo/edit/' + id,
          query: {
            pageNum: this.queryParams.pageNum
          }
        });
        this.handleClose();
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateStaging(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addStaging(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除移交登记数据项？').then(() => {
          this.loading = true;
          return delStaging(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).finally(() => {
          this.loading = false;
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('buss/staging/export', {
          ...this.queryParams
        }, `staging_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
